<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-breadcrumbs :items="breadcrumbs">
      <template v-slot:divider>
        <v-icon>forward</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container fluid fill-height grid-list-md>
      <v-layout row wrap>
        <v-flex d-flex xs12 sm6 md4 lg3 v-for="item in bodyShape" v-bind:key="item.name">
          <v-card color="blue" dark>
            <v-card-title primary class="headline">
              <v-layout justify-space-between align-center>
                <div>{{item.name}}</div>
                <v-btn flat icon v-on:click="showChangeDialog(item.name,item.comment,item.bodyShapeAnalysis)">
                  <v-icon dark>edit</v-icon>
                </v-btn>
              </v-layout>
            </v-card-title>
            <v-card-text>
              <div class="title">评价</div>
              <div v-for="item in item.comment" v-bind:key="item">{{item}}</div>
            </v-card-text>
            <v-card-text>
              <div class="title">体态分析</div>
              <div>{{item.bodyShapeAnalysis}}</div>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
    <v-dialog v-model="changeDialog.visible" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">{{changeDialog.title}}</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-layout wrap>
              <v-flex xs12>
                <v-textarea v-model="changeDialog.content" auto-grow label="评价" rows="1"></v-textarea>
              </v-flex>
              <v-flex xs12>
                <v-textarea v-model="changeDialog.analysis" auto-grow label="体态分析" rows="1"></v-textarea>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="changeDialog.visible=false">关闭</v-btn>
          <v-btn color="blue darken-1" flat @click="submitBodyShape">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { getBodyShape, postBodyShape } from '../../api/comment'
export default {
  name: 'BodyShape',
  data: () => ({
    breadcrumbs: [
      {
        text: '评语信息',
        disabled: true
      },
      {
        text: '身体形态',
        disabled: true
      }
    ],
    bodyShape: [],
    changeDialog: {
      visible: false,
      title: '',
      content: '',
      analysis: ''
    }
  }),
  mounted () {
    getBodyShape().then(res => {
      this.bodyShape = res.data.data
    })
  },
  methods: {
    showChangeDialog (title, comment, analysis) {
      this.changeDialog.title = title
      this.changeDialog.content = ''
      for (let i = 0; ; i++) {
        this.changeDialog.content += comment[i]
        if (i === comment.length - 1) {
          break
        } else {
          this.changeDialog.content += '\n'
        }
      }
      this.changeDialog.analysis = analysis
      this.changeDialog.visible = true
    },
    submitBodyShape () {
      postBodyShape(this.changeDialog.title, this.changeDialog.content, this.changeDialog.analysis).then((res) => {
        this.changeDialog.visible = false
        getBodyShape().then(res => {
          this.bodyShape = res.data.data
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
